<template>
    <div style="padding:10px;">
        <el-button type="primary" @click="addArticle">添加</el-button>
        <el-table :data="tableData" style="width:calc(100vw - 260px)">
            <el-table-column prop="bookName" label="书籍"/>
            <el-table-column prop="bookjieshao" label="书籍介绍"/>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleClick(scope.row)">编辑</el-button>
                    <el-button link type="danger" size="small" @click="delClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="dialogVisible"
            :title="title"
            append-to-body
            v-if="dialogVisible"
            :close-on-click-modal="false"
            width="20%"
        >
            <div class="userEdit">
                <div class="userItem">
                    <el-input v-model="bookObj.bookName" placeholder="请输入书籍标题" />
                </div>
                <div class="userItem">
                    <el-input type="textarea" v-model="bookObj.bookjieshao" placeholder="请书籍文章内容" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confromClick">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref,reactive,onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from 'axios'
const router=useRouter();
const dialogVisible=ref(false)
const tableData=ref([])
const title=ref("添加")
const bookId=ref(0)
const bookObj=reactive({
    bookName:"",
    bookjieshao:""
})
onMounted(() => {
    getArticle();
})
const getArticle=()=>{
    axios({
        method:"get",
        url:'http://localhost:5000/book/select',
        headers:{
            'token':sessionStorage.getItem('token'),
            'Content-Type':'application/json;charset=UTF-8'
        }
    }).then(res=>{
        if(res.data.code==200){
            tableData.value=res.data.data
        }
    }).catch(err=>{
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("username");
        router.push("/login")
    })
}
// 点击确定
const confromClick=()=>{
    let obj={
        bookName:bookObj.bookName,
        bookjieshao:bookObj.bookjieshao,
    }
    if(bookId.value!=0){
        obj.id=bookId.value;
        axios({
            method:"post",
            url:'http://localhost:5000/book/upd',
            data:obj,
            headers:{
                'token':sessionStorage.getItem('token'),
                'Content-Type':'application/json;charset=UTF-8'
            }
        }).then(res=>{
            if(res.data.code==200){
                ElMessage({
                    type: 'success',
                    message: '保存成功！',
                });
                dialogVisible.value=false;
                getArticle();
                bookObj.bookName="";
                bookObj.bookjieshao=""
            }
        }).catch(err=>{
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("username");
            router.push("/login")
        })
    }else{
        axios({
            method:"post",
            url:'http://localhost:5000/book/add',
            data:obj,
            headers:{
                'token':sessionStorage.getItem('token'),
                'Content-Type':'application/json;charset=UTF-8'
            }
        }).then(res=>{
            if(res.data.code==200){
                ElMessage({
                    type: 'success',
                    message: '保存成功！',
                });
                dialogVisible.value=false;
                getArticle();
                bookObj.bookName="";
                bookObj.bookjieshao=""
            }
        }).catch(err=>{
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("username");
            router.push("/login")
        })
    }
}
// 添加
const addArticle=()=>{
    dialogVisible.value=true;
}
const handleClick = (row)=>{
    title.value="编辑";
    bookObj.bookName=row.bookName;
    bookObj.bookjieshao=row.bookjieshao;
    bookId.value=row.id;
    dialogVisible.value=true;

}
const delClick=(row)=>{
    axios({
        method:"post",
        url:'http://localhost:5000/article/del',
        data:{id:row.id},
        headers:{
            'token':sessionStorage.getItem('token'),
            'Content-Type':'application/json;charset=UTF-8'
        }
    }).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type: 'success',
                message: '删除成功！',
            });
            getArticle();
        }
    })
}
</script>
<style lang="scss" scoped>
    .userEdit{
        .userItem{
            margin-top:10px;
        }
    }
</style>